jQuery — Element Index and Event Object

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:eq() Selector

The :eq selector lets us select an element at the given index within the matched set.

For example, if we have:

<ul>  
  <li>item 1</li>  
  <li>item 2</li>  
  <li>item 3</li>  
  <li>item 4</li>  
  <li>item 5</li>  
</ul>

Then we can write:

$("li:eq(2)").css("background-color", "red");

to get the 3rd li and add a red background to it.

.even()

We can get the elements that are the ones with an even number index in the matched set with the even method.

For example, if we have:

<ul>  
  <li>item 1</li>  
  <li>item 2</li>  
  <li>item 3</li>  
  <li>item 4</li>  
  <li>item 5</li>  
</ul>

Then we call it by writing:

$("li").even().css("background-color", "red");

to add a red background to the li elements with an even index.

event.currentTarget

We can use the event.currentTarget property to get the current DOM element within the event bubbling phase.

For example, if we have:

<p>  
  click me  
</p>

We can get the p element that we clicked on by writing:

$("p").click(function(event) {  
  alert(event.currentTarget === this);  
});

The alert should be true since this is the p element that we clicked on, which is the same as event.currentTarget .

event.data

The event.data is a property with the data that as pass into an event.

For example, if we have the following HTML:

<button> 0 </button>  
<button> 1 </button>  
<button> 2 </button>  
<button> 3 </button>  
<button> 4 </button>

Then we can add click listeners to each element and get the data by writing:

for (let i = 0; i < 5; i++) {  
  $("button").eq(i).on("click", {  
    value: i  
  }, function(event) {  
    console.log('value: ', event.data.value)  
  });  
}

We get the event.data.value property’s value in the click callback.

This should be the same value as the value property we pass in as the 2nd argument.

event.delegateTarget

The event.delegateTarget property has the element where the currently called jQuery event handler was attached.

For example, if we have:

<div class='box'>  
  <button>  
    0  
  </button>  
</div>  
<div class='box'>  
  <button>  
    1  
  </button>  
</div>  
<div class='box'>  
  <button>  
    2  
  </button>  
</div>

Then we can set the div with the class box to have a red background when we click on the button inside by writing:

$(".box").on("click", "button", function(event) {  
  $(event.delegateTarget).css("background-color", "red");  
});

event.isDefaultPrevented()

We can call event.isDefaultPrevented() to check whether event.preventDefault() is called on an object.

For example, if we have:

<a>hello</a>

Then we can call this method by writing:

$("a").click(function(event) {  
  alert(event.isDefaultPrevented());   
  event.preventDefault();  
  alert(event.isDefaultPrevented());   
});

We call the method and show its return value in the alert box.

event.isPropagationStopped()

We can call the event.isPropagationStopped() method to check if we called event.stopPropagation() .

For example, if we have:

<button>click me</button>

Then we can call this method by writing:

$("button").click(function(event) {  
  alert(event.isPropagationStopped());  
  event.stopPropagation();  
  alert(event.isPropagationStopped());  
});

Conclusion

We can get matched items by its index.

Also, we can check if stopPropagation and preventDefault are called with jQuery methods.